import {formatNumberWithUnit,toFixPercent,toFixedWithSeveral,formatAbnormalData } from "@/tools/util";
//业务单元排行榜
export const getBuBankOption = (chatDataX,chatDataY) =>{
  const colors = ["#f59a233c","#f59a23c6",'#e37318','#954500','#954500bb','#facd91','#bfbf0069','#ffff007c']
  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: (params) =>{
        const total = params.reduce((sum, item) => sum + item.data.weightedScore, 0)
        let htmlDiv = '<div style="width:480px;padding: 0px 10px;background: #fff;font-size: 12px;color: #999;">';
        htmlDiv += '<p style="font-size: 14px;font-weight:bold;">'+params[0].name+'：<span>'+toFixedWithSeveral(total)+'</span></p>'
        htmlDiv += '<ul style="margin: 10px 0; width:100%">'
        htmlDiv += '<li style="display: flex;align-items: center;justify-content: space-between;;line-height: 30px;">\
                      <span style="flex:0.4"></span>\
                      <span style="flex:0.2;text-align:center;">指标得分</span>\
                      <span style="flex:0.2;text-align:center;">权重</span>\
                      <span style="flex:0.2;text-align:center;">加权得分</span>\
                    </li>'
        params.forEach((ele,index) => {
          htmlDiv += '<li style="display: flex;align-items: center;justify-content: space-between;line-height: 30px;">\
                        <div style="flex:0.4;display: flex;align-items: center;">\
                          <div style="width:12px;height:12px;margin-right:10px;background:'+colors[index]+'" class="serName"></div>\
                          <span>'+ele.seriesName+'</span>\
                        </div>\
                        <span style="flex:0.2;text-align:center;">'+formatAbnormalData(ele.data.targetScore)+'</span>\
                        <span style="flex:0.2;text-align:center;">'+formatAbnormalData(toFixPercent(ele.data.weight))+'</span>\
                        <span style="flex:0.2;text-align:center;">'+formatAbnormalData(ele.data.weightedScore)+'</span>\
                      </li>'
        })
        htmlDiv += '</ul>'
        htmlDiv += '<p style="font-size: 14px;font-weight:bold;text-align: right;">最终得分：'+toFixedWithSeveral(total)+'</p></div>'
        return htmlDiv;
      },
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          width: '2',
          barGap: '0%',
        }
      }
    },
    legend: {
      left: 'center',
      top:"top",
      width:"60%",
      // formatter: (name) => {
      //   console.log(name,option.legend,"lololo")
      //   // 每3个图例一组进行换行
      //   let idx = option.legend.data.indexOf(name);
      //   if ((idx + 1) % 4 === 0 && idx !== option.legend.data.length - 1) {
      //     return name + '\n';
      //   }
      //   return name;
      // }
      // itemWidth:12,
      // itemGap:6
    },
    grid: {
      left: '0%',
      right: '8%',
      bottom: '0%',
      containLabel: true
    },
    dataZoom : [
      // {
      //   show: false , // 是否显示滑动条,在这里可以根据自己的需求做判断，超过时显示进度条
      //   type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
      //   realtime: true,
      //   xAxisIndex: [0],
      //   startValue: 0, // 从头开始。
      //   endValue: 6,
      //   bottom: 5,
      //   left: '30',
      //   height: 10,
      //   borderColor: 'rgba(0,0,0,0)',
      //   textStyle: {
      //     color: '#05D5FF',
      //   },
      //   zoomLock: true, // 锁定视图
      //   brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
      //   // 通过该属性可以只滑动，不显示缩放功能
      //   handleStyle: {
      //     // 手柄样式
      //     opacity: 0
      //   }
      // },
      // {
      //   show: true, //是否显示滑动条
      //   type: 'inside',
      //   realtime: true,
      //   xAxisIndex: [0],
      //   start: 1,
      //   end: 35
      // },
    ],
    xAxis: [
      {
        type: 'category',
        data: chatDataX,
        interval: 0,
        axisTick: {
          alignWithLabel: "shift"
        },
        axisLabel:{
          interval:0,
          formatter: (value)=>{
            return value.split('').join('\n');
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0, // 设定Y轴的最小刻度
        max: 100, // 设定Y轴的最大刻度
        interval: 25 // 设定Y轴刻度的间隔
      }
    ],
    series: []
  };

  if(chatDataY?.length){
    let tarArr1 = chatDataY.map(ele => ele?.dataList.find(item => item?.targetName == "报送数据量核对"));
    let tarArr2 = chatDataY.map(ele => ele?.dataList.find(item => item?.targetName == "非结构化附件报送率-表1"));
    let tarArr3 = chatDataY.map(ele => ele?.dataList.find(item => item?.targetName == "非结构化附件报送率-表3"));
    let tarArr4 = chatDataY.map(ele => ele?.dataList.find(item => item?.targetName == "履约及支付滚动报送率-表7"));
    let tarArr5 = chatDataY.map(ele => ele?.dataList.find(item => item?.targetName == "履约及支付滚动报送率-表8"));
    let tarArr6 = chatDataY.map(ele => ele?.dataList.find(item => item?.targetName == "报送表单结构完整率"));
    let tarArr7 = chatDataY.map(ele => ele?.dataList.find(item => item?.targetName == "框架协议完整报送率"));
    let tarArr8 = chatDataY.map(ele => ele?.dataList.find(item => item?.targetName == "数据质量指标"));
    let targetArr = [tarArr1, tarArr2, tarArr3, tarArr4, tarArr5, tarArr6, tarArr7,tarArr8].filter(ele => !!ele[0]);//过滤空指标
    for(let i=0;i<targetArr.length;i++){
      option.series.push({
        type: 'bar',
        sort: 'ascending',
        stack: 'same',
        barWidth: '30%',
        name:targetArr[i][0]?.targetName,
        data: targetArr[i]?.map(ele => {
          return {
            value: ele?.weightedScore,
            targetScore:ele?.targetScore,
            weight: ele?.weight,
            weightedScore:ele?.weightedScore
          }
        }),
        itemStyle: {
          color: colors[i],
          barGap: '0%', // 或者一个具体的像素值，如 '5px'
        },
        label: { //柱体上显示数值
          show: false,//开启显示
          position: 'top',//在上方显示
          textStyle: {//数值样式
            fontSize: '12px',
            color: '#666'
          },
          formatter: '{c}',
        },
        markLine: {
          silent: true,
          symbol: ['none', 'none'],
          data: [
              // 这里的 yAxis 值是范围的起始点，而 yAxis2 是范围的结束点
              // {type: 'average', name: '平均值'},
              // {type: 'min', name: '最小值', lineStyle: {color: 'red'}},
              {
                yAxis: 0, 
                yAxis2: 60,
                lineStyle: {
                  width: 2,
                  color: '#000',
                  type: 'solid'
                },
                label: {
                  show:true,
                  color:"#7F7F7F",
                  fontFamily : 'Arial Normal, Arial,sans-serif',
                  formatter: '不及格（60-0不含）'
                }
              },
              {
                yAxis: 60, 
                yAxis2: 70,
                lineStyle: {
                  width: 2,
                  color: 'rgb(255,255,0)',
                  type: 'solid'
                },
                label: {
                  show:true,
                  color:"#7F7F7F",
                  fontFamily : 'Arial Normal, Arial,sans-serif',
                  formatter: '及格（70-60不含）'
                },
              },
              {
                yAxis: 70, 
                yAxis2: 80,
                lineStyle: {
                  width: 2,
                  color: '#15d6ba',
                  type: 'solid'
                },
                label: {
                  show:true,
                  color:"#7F7F7F",
                  fontFamily : 'Arial Normal, Arial,sans-serif',
                  formatter: '良好（80-70不含）'
                },
              },
              {
                yAxis: 80, 
                yAxis2: 100,
                lineStyle: {
                  width: 2,
                  color: '#8080ff',
                  type: 'solid'
                },
                label: {
                  show:true,
                  fontFamily : 'Arial Normal, Arial,sans-serif',
                  color:"#7F7F7F",
                  formatter: '优秀（100-80不含）'
                }
              }
          ]
        }
      })
    }
  }
  return option
}

//非结构化附件报送率
export const getPieOption = function(chatData,title) {
  const option = {
    title: {
      text: title,
      textStyle:{
        color:"#333",
        fontWeight:"bold",
        fontSize:16
      },
      textAlign:"auto",
      left:"center"
    },
    tooltip: {
      formatter:(params) => {
        return params?.name+"：" + params?.value+'('+params?.percent+'%)'
      },
      confine: false,
      appendToBody: false,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    series: [
      {
        type: 'pie',
        radius: ['55%', '70%'],
        // center: ['25%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
          // formatter: "{c}",

          formatter:(params) => {
            return '{a|' + toFixPercent(params.value) + '}';
          },

          rich: {
            a: {
              color: '#333',
              fontSize: 25,
              align: 'center'
            }
          }
        },
        labelLine: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 12,
          }
        },
        data: chatData
      }
    ]
  };
  return option
}
  
// 报送数据量核比（★★★★）
export const getSubmissionsOption = (chatData,total,buName) =>{
  const option = {
    title: {
      text: buName+'守正平台开标标段预算总额：'+ formatNumberWithUnit(total),
      textStyle:{
        color:"#333",
        fontWeight:"bold",
        fontSize:18,
      },
      padding:[10,0],
      textAlign:"auto",
      left:"center"
    },
    tooltip: {
      trigger: 'item',
      formatter:(params) => {
        return params?.name+"：" + formatNumberWithUnit(params?.value)+'('+toFixPercent(params?.value / total)+')'
      }
    },
    legend: {
      show: true,
      data: ['未上报标段的预算占比', '已上报标段的预算占比'],   
      formatter:(name) => {
        const value = chatData.find(ele => ele?.name == name)?.value;
		const perRate = value / total;
        const rate = toFixPercent(perRate)
        return name + '：' + rate
      },
      top: 'bottom',
      left: 'center',
      orient :'vertical',
      verticalAlign: 'middle',
      itemHeight: 14,
      textStyle:{
        fontWeight: 700,
        fontSize: 18,
        color: "#333",
        lineHeight:20,
        padding: [0,0, 0, 6]
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    color:['#F99C3480','#FFAD11'],
    series: [
      {
        type: 'pie',
        radius:'50%',
        avoidLabelOverlap: false,
        label: {
          show: true,
          formatter:(params) => {
            return params?.name+"：" + formatNumberWithUnit(params?.value)+'('+toFixPercent(params?.value / total)+')'
          }
        },
        data: chatData
      }
    ]
  }
  return option
}

//结构化字段填报质量问题分布
export const getQualityOption = function(chatData,total) {
  const option = {
    title: {
      text: "TOP5 问题标签",
      textStyle:{
        color:"#333",
        fontWeight:"bold",
        fontSize:16
      },
      textAlign:"auto",
      left:"left"
    },
    tooltip: {
      formatter: "{b}: {c} ({d}%)",
      confine: false,
      appendToBody: false,
    },
    legend: {
      show: true,
      icon: 'circle',  
      width: 50,
      formatter: function(name){
        const value = chatData.find(ele => ele?.name == name)?.value;
        return '{a|' + name + ':}{b|' + value + '}';
        // return '<span style="display:inline-block;width:50px;text-align:center;">' + name + '</span>';
        // return name + '：' + chatData.find(ele => ele?.name == name)?.value
      },
      textStyle:{
        rich: {
          a: {
            // width: 200,
            align: 'left'
          },
          b: {
              align: 'left'
          }
        }
      },
      
      itemGap:20,
      top: 'center',
      left: '50%',
      orient :'vertical'
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: '3%',
      containLabel: true
    },
    series: [
      {
        type: 'pie',
        radius: ['48%', '62%'],
        center: ['20%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'center',
          // formatter:(params) => {
          //   if (params.name !== '总数') {
          //       // 显示除“总数”以外的其他部分
          //       return '{a|' + params.name + '}\n{b|' + params.value + '}';
          //   } else {
          //       // 显示总数
          //       return '{a|总数}\n{b|' + option.series[0].data.reduce((sum, item) => sum + item.value, 0) + '}';
          //   }
          // },
          formatter: '{a|总数}\n{b|' + total+'}',
          width:"120",
          rich: {
            a: {
                color: 'rgba(0, 0, 0, 0.427)',
                lineHeight: 22,
                align: 'center'
            },
            b: {
                color: '#000',
                lineHeight: 22,
                fontSize:18,
                padding:[10,0,0,0],
                align: 'center'
            }
          }
        },
        labelLine: {
          show: false
        },
        emphasis: {
          label: {
            show :true,
            fontSize: 12,
            formatter: '{a|总数}\n{b|' + total+'}',
            rich: {
              a: {
                color: 'rgba(0, 0, 0, 0.427)',
                lineHeight: 22,
                align: 'center'
              },
              b: {
                  color: '#000',
                  lineHeight: 22,
                  fontSize:18,
                  padding:[10,0,0,0],
                  align: 'center'
              }
            }
          }
        },
        data: chatData
      },
    ],

    // graphic: [
    //   {
    //     type: 'text',
    //     left: '15%',
    //     top: 'center',
    //     style: {
    //       text: '报错数量', // 要显示的数字
    //       textAlign: 'center',
    //       fill: 'rgba(0, 0, 0, 0.427)', // 文本颜色
    //       fontSize: 12,
    //       lineHeight: 22,
    //     }
    //   },
    //   {
    //     type: 'text',
    //     left: '10%',
    //     top: 'center',
    //     style: {
    //       text: total, // 要显示的数字
    //       textAlign: 'center',
    //       fill: '#000', // 文本颜色
    //       fontSize: 18
    //     }
    //   } 
    // ]
  };
  return option
}




